<template>
  <div id="index">
     
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body bg">
       <div class="title">
       <div class="title-text"> 水口闽江多功能互补 </div>
         <div class="about-wraper">
           <i
             class="el-icon-s-tools"
             style="font-size: 18px"
             @click="DialogShowHandler"
           ></i>
       
       </div>
       </div>

        <el-row>
        <el-col :span="6">
          <div>
            <el-button size="mini" class="button_">15</el-button>
            <el-button size="mini" class="button_">16</el-button>
             <el-button size="mini" class="button_">17</el-button>
             <el-button size="mini" class="button_">18</el-button>
             <el-button size="mini" class="button_">19</el-button> 
             <el-button size="mini" class="button_">20</el-button> 
             <el-button size="mini" class="button_">21</el-button> 
          </div>
          <div>

            <dv-border-box-13 :color="['#1AFFE4']">
              <bottomLeft />
            </dv-border-box-13>
          </div>
          <div>
           <dv-border-box-13 :color="['#1AFFE4']">
              <bottomLeft1 />
            </dv-border-box-13>
          </div>
           <div>
           <dv-border-box-13 :color="['#1AFFE4']">
              <bottomLeft2 />
            </dv-border-box-13>
          </div>
        </el-col>
        <el-col :span="12">
          
       
           <centerTop /> 
        
          
          <centerBottom />
         
        </el-col>
        <el-col :span="6">
          <div >
          
           <div>
             <el-button size="mini" class="button_">早峰</el-button>
             <el-button size="mini" class="button_">晚锋</el-button>
              <el-button size="mini" class="button_">平段</el-button>
              <el-button size="mini" class="button_">谷段</el-button>
              <el-button size="mini" class="button_">全天</el-button> 
            </div> 
          </div> 
          <div>
            <dv-border-box-13 :color="['#1AFFE4']">
              <bottomRight />
            </dv-border-box-13>
          </div>
          <div>
           <dv-border-box-13 :color="['#1AFFE4']">
              <bottomRight1 />
            </dv-border-box-13>
          </div>
           <div>
           <dv-border-box-13 :color="['#1AFFE4']">
              <bottomRight2 />
            </dv-border-box-13>
          </div>

        </el-col>
      </el-row>
      


   

   

      </div>
    
   
   <div class="table-wrapper">
    
     <!-- 关于弹窗 -->
     <el-dialog
       
       :visible.sync="DialogVisible"
        width="65%"
        custom-class="e-dialog"
       :before-close="DialogClose"
     >
       <sysConfig />
     </el-dialog>
    
     
   </div>
  </div>

</template>

<script>
import bottomLeft from "./bottomLeft";
import bottomLeft1 from "./bottomLeft1";
import bottomLeft2 from "./bottomLeft2";
import centerTop from "./centerTop";
import centerBottom from "./centerBottom";

import bottomRight from "./bottomRight";
import bottomRight1 from "./bottomRight1";
import bottomRight2 from "./bottomRight2";
import sysConfig from './sysConfig'


export default {
  data() {
    return {
      loading: true,
      DialogVisible: false
    };
  },
  components: {
    bottomLeft,
    bottomLeft1,
    bottomLeft2,
    centerTop,
    centerBottom,

    bottomRight,
    bottomRight1,
    bottomRight2,
    sysConfig
   
  },

  mounted() {
    this.cancelLoading();
    
    
  },
  
  methods: {
    DialogShowHandler () {
      this.DialogVisible = true
    },
    DialogClose () {
      this.DialogVisible = false
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  }
};
</script>

<style lang="scss">
@import "../assets/scss/index.scss";


</style>